<template>
  <div class="myAddress">
    <div class="myAddressBox"></div>
    <router-link tag="i" to="center" class="iconfont icon-fanhui icon-btn"></router-link>
    <miao-header>
      <span slot="header">我的地址</span>
    </miao-header>
    <router-link tag="div" :to="{name:'addSite'}" class="goAddSite">
        <i class="el-icon-circle-plus-outline"></i>
        <span>新增收货地址</span>
    </router-link>
    <app-loading :isHidLoading="isHidLoading"></app-loading>
    <div class="addressScrollY" ref="addressScrollY">
      <div>
        <div class="history"
             v-for="(item, key) in historyAddSite"
             :key = 'key'>
          <div class="history-order" @click="orderFn(item)">
            <p>{{item.receiver}}</p>
            <p>{{item.telNumber}}</p>
            <P>
              {{item.province}}
              {{item.city}}
              {{item.district}}
            </P>
            <P>{{item.details}}</P>
          </div >
          <span @click="del(key, item._id)">删除</span>
        </div>
        <div class="historyBox"></div>
      </div>
    </div>
  </div>

</template>

<script>
    export default {
        data(){
          return{
            historyAddSite:[],
            isHidLoading:false
          }
        },
      created(){
          this.isHidLoading = true;
          this.$http.get('/api/addr')
            .then(req=>{
              req.data.code===-1&&(this.$router.push({name:'ringUp'}));
              if(req.data.code===1){
                this.isHidLoading = false;
                this.historyAddSite=req.data.data
              }
            });
        },
        mounted(){
          this.$nextTick(()=>{
            this.$refs.addressScrollY&&new this.$BSscroll(this.$refs.addressScrollY,{
              //动画移动方向
              scrollY:true,
              //弹跳的方向
              bounce:{
                left:false,
                right:false,
                top:false,
                bottom:true
              },
              //动画速率
              momentum:true,
              click:true,
            });
          })

        },
        methods:{
          del(val, locId){
            this.isHidLoading = true;
            this.$http.delete('/api/addr',
              {
                params:{addrid:locId}
              }).then(req=>{
                if(req.data.code===1){
                  this.isHidLoading = false;
                  this.historyAddSite.splice(val,1)
                }
              }).catch(error=>{
                console.log(error);
              })
          },
          orderFn(val){
            if(this.$store.state.sitefill){
              this.$http.post('/api/updateOrderAddr',{
                orderld:this.$store.state.sitefill,
                addrld:val._id
              }).then(req=>{
                if(req.data.code===1){
                  this.$store.state.site = val;
                  this.$router.push({name:'fillInOrder'})
                }
              });
            }
          }
        },

        name: "myAddress"
    }
</script>

<style scoped>
  .myAddressBox{
    height: 100px;
  }
  .icon-btn{
    display: inline-block;
    position: relative;
    left: 40px;
    bottom:73px;
    float: left;
    color: #fff;
    font-size: 44px;
    cursor: pointer;
    z-index: 999;
  }
 .goAddSite{
   height: 95px;
   border-top:1px solid #eee;
   border-bottom:1px solid #eee;
   font-size: 0;
   text-align: center;
   line-height: 95px;
 }
  .goAddSite>i{
    font-size: 50px;
    color: #7bd98d;
    vertical-align: middle;
  }
  .goAddSite>span{
    font-size: 33px;
    vertical-align: middle;
  }
  .addressScrollY{
    height: 100vh;
    overflow: hidden;
  }
  .historyBox{
    height: 240px;
  }
  .history{
    height: auto;
    padding: 10px 40px;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }
  .history>.history-order{
    height: auto;
    padding: 10px 40px;
    position: relative;
    box-sizing: border-box;
  }
  .history-order>p{
    line-height: 1.7;
    font-size: 32px;
    color: #212121;
  }
  .history>span{
    display: inline-block;
    position: absolute;
    right: 40px;
    top:40px;
    font-size: 30px;
    padding: 10px 30px;
    border-radius: 5px;
    border: 1px solid #e4e4e4;
  }
</style>
